<template>
  <div class="cash">
    <header class="cash-header">
      <div class="item-balance">
        <span class="fontGilroy">{{deposit}}</span>
        <p>{{deposit_alias}}余额(元)</p>
      </div>
      <div class="getcash">
        <van-button class="recharge-btn" @click="Jump('rechargeList')" color="#ffffff" plain hairline round type="primary" v-if="is_close_deposit_recharge == 0">我要充值</van-button>
        <van-button class="recharge-btn" @click="clickSendDeposit" style="margin-left: 6px;" v-if="is_deposit_to_another > 0" color="#ffffff" plain hairline round type="primary">转赠</van-button>
      </div>
    </header>
    <div class="cash-detail">
      <div class="tab_nav">
        <span class="show">{{deposit_alias}}变动记录</span>
      </div>
      <div class="change_record">
        <div class="list-title">
          <span>收/支</span>
          <span>余额</span>
          <span>时间</span>
        </div>
        <van-list v-show="list.length"
                  v-model="loading"
                  :error.sync="error"
                  error-text="请求失败，点击重新加载"
                  :finished="finished"
                  @load="loadMore">
          <div class="list-item"
               v-for="(item, index) in list"
               :key="index">
            <span>{{item.change_money}}</span>
            <span>{{item.after_money}}</span>
            <span>{{item.create_time}}</span>
          </div>
        </van-list>
        <no-data v-show="!list.length && finished"
                 :noData="noData"></no-data>
      </div>
    </div>
    <!-- 转赠预存款 -->
    <van-dialog v-model="showDonation"
                :title="deposit_alias+'转赠'"
                show-cancel-button
                @confirm='confirmDonation'
                class="common-confirm"
                @close="hideDonation">
      <section class="donation-box">
        <div class="input-box">
          <label for="">下级订货商：</label>
          <select name="friend_uid"
                  value="-1"
                  v-model="friend_uid">
            <option value="-1">选择会员</option>
            <option v-for="(vo,index) in low_dhs_ids"
                    :key="index"
                    :value="vo.user_id">{{vo.nick}}（{{vo.user_id}}）</option>
          </select>
          <span class="info"></span>
        </div>
        <div class="input-box">
          <label for="">转赠金额：</label>
          <input type="number"
                 name="deposit_num"
                 v-model="deposit_num" />
        </div>
      </section>
    </van-dialog>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import Scroll from '@/components/scroll/index'
import { getDeposit, dhsDeposit } from '@/api/user/dhs/dhsApi'

import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      deposit: '',
      deposit_alias: '',
      is_deposit_to_another: '1',
      p: 2,
      noData: {
        text: '暂无订单',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png',
        marginTop: '10em'
      },
      loading: false,
      finished: false,
      error: false,
      list: [],
      low_dhs_ids: [],
      showDonation: false,
      showDonationConfirm: false,
      deposit_num: '',
      friend_uid: -1,
      is_close_deposit_recharge: 0 // 是否关闭充值
    }
  },
  created() {
    this.init()
  },
   mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.loadMore()
    })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      getDeposit().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // TODO 小程序处理title
            wx.setNavigationBarTitle({
              title: res.data.deposit_alias
            })
          this.deposit_alias = res.data.deposit_alias
          this.deposit = res.data.deposit
          this.is_deposit_to_another = res.data.is_deposit_to_another
          this.low_dhs_ids = res.data.low_dhs_ids
          this.list = res.data.depositLog
          this.is_close_deposit_recharge = res.data.is_close_deposit_recharge
          // 其它
          this.noData.text = `暂无${res.data.deposit_alias}`
          if (this.list.length < 10) {
            this.finished = true
          }
        } else {
          this.$Error(res.mag)
        }
      })
    },
    // 转赠预存款
    clickSendDeposit() {
      if (this.deposit > 0) {
        this.showDonation = true
      } else {
        this.$Error(this.deposit_alias + '余额不足，请先充值！')
      }
    },
    // 关闭转赠弹窗清空弹窗数据
    closeDonation() {
      this.friend_uid = -1
      this.money = ''
    },
    // 点击转赠预存款弹窗关闭按钮
    hideDonation() {
      this.showDonation = false
      this.closeDonation()
    },
    // 点击确定转赠
    confirmDonation() {
      // 数据判断合法性
      if (this.friend_uid < 0) {
        this.$Error('请选择转赠会员！')
        return false
      }
      if (this.deposit_num <= 0) {
        this.$Error('请填写正确的转赠金额！')
        return false
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const params = {
        friend_uid: this.friend_uid,
        money: this.deposit_num
      }
      dhsDeposit(params).then(res => {
        this.$loadingWrap.close()
        this.hideDonation()
        if (res.status == 1) {
          this.$Error('转赠成功')
          this.init()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    // 加载更多
    loadMore() {
      const data = {
        p: this.p
      }
      getDeposit(data).then(res => {
        this.loading = false
        if (res.data.depositLog.length) {
          this.list = this.list.concat(res.data.depositLog)
          this.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    }
  },
  components: {
    noData,
    Scroll
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.miniprogram-root {
  .cash .cash-header .getcash .recharge-btn {
    border: 2px #fff !important;
  }
  .cash .donation-box .input-box .h5-select {
    line-height: 2;
    overflow: hidden;
    .h5-option {
      width: 100%;
      display: inline-block;
      overflow: hidden;
    }
  }
}
.cash {
  background: url(https://img.wifenxiao.com/h5-wfx/images/user/despites_bg.png) top center/contain
    no-repeat;
  .cash-header {
    .item-balance {
      padding-top: 40px;
      color: #fff;
      text-align: center;
      span{
        display: block;
        font-size: 50px;
        font-weight: bold;
        margin-bottom: 15px;
      }
      p {
        font-size: 26px;
        color: #FFD9DD;
      }
    }
    .getcash {
      position: relative;
      width: 100%;
      display: inline-block;
      text-align: center;
      padding: 30px 0 40px;
      .recharge-btn {
        display: inline-block;
        width: 190px;
        height: 60px;
        background: transparent;
        color: #fff;
        font-size: 26px;
      }
    }
  }
  .cash-detail {
    font-family: PingFang SC;
    margin: 0 25px;
    padding: 0 25px;
    background-color: #fff;
    border-radius: 20px;
    .tab_nav {
      display: flex;
      justify-content: space-between;   
      span {
        flex: 1;
        position: relative;
        font-weight: 500;
        font-size: 32px;
        color: #333;
        line-height: 96px;
        text-align: center;
        &.show {
          color: #333;
        }
      }
    }
    .change_record {
      text-align: center;
      margin-top: 18px;
      .list-title,
      .list-item {
        border-bottom: 1px solid #EDEDED;
        line-height: 100px;
        text-align: center;
        display: flex;
        span {
          font-weight: bold;
          font-size: 28px;
          color: #333;
          width: 25%;
          &:last-child {
            width: 50%;
          }
        }
      }
      .list-item{
        span{
          &:first-child {
            color: #FD2049;
          }
          &:last-child{
            font-weight: normal;
            font-size: 24px;
            color: #999;
          }
        }
      }
      .list-title {
        line-height: 86px;
        background: #F7F7F7;
        border-radius: 10px;
        border: 0;
        span{
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
  }
  /* 转赠订货商预存款弹窗 */
  .donation-box{
      padding: 40px 0;
      .input-box{
        width: 100%;
        padding: 0 20px;
        overflow: hidden;
        &:nth-of-type(2) {
          margin-top: 25px;
        }
        label{
          width: 35%;
          display: block;
          float: left;
          font-weight:normal;
          text-align: right;
          font-size: 28px;
          line-height: 76px;
          color: #666666;
        }
        input,select{
          width: 41%;
          padding: 15px 20px;
          display: block;
          float: left;
          height: 76px;
          background-color: #fff;
          border-radius: 6px;
          border: 2px solid #EDEDED;
          font-size: 24px;
          color: #999999;
        }
        select{
          padding:15px 30px 15px 20px;
        }
        .info{
          display: block;
          float: right;
          font-size: 24px;
          color: #ff5000;
          width: 25%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
}
</style>
